<template>
	<view class="">
		<nav-bar title="课程中心" :color="navBarColor" :bg="navBarBg"></nav-bar>
		<view class="">
			<view class="item">
				<view class="flex-space-between week-list">
					<view class="week-item" :class="{'active':index === selectId}" v-for="(item,index) in timeList"
						:key="index" @click="timesSelect(item,index)">
						{{item.name}}
					</view>
				</view>
			</view>
			<text lines="1" class="text_8">优惠券类型</text>
			<view class="item" style="border-bottom: solid 2rpx #efefef;">
				<view class="flex-space-between week-list">
					<view class="week-item" :class="{'active1':weekSelect.includes(item)}" v-for="item in weekList"
						:key="item" @click="handSelect(item)">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navbar from '@/mixins/navbar.js';
	export default {
		mixins: [navbar({
			navBarColor: '#000000'
		})],
		data() {
			return {
				timeList: [{
						name: '即时发送',
						id: '1'
					},
					{
						name: '定时发送',
						id: '2'
					}
				],
				selectId: 0,
				weekList: [{
					name: '现金券',
					id: '1'
				}, {
					name: '站内信',
					id: '2'
				}, {
					name: '满减券',
					id: '3'
				}],
				weekSelect: [], //选中的
			}
		},
		onLoad() {
			
		},
		methods: {
			timesSelect(item, index) {
				this.selectId = index
			},
			// 发送渠道
			handSelect(data) {
				if (this.weekSelect.includes(data)) {
					this.weekSelect = this.weekSelect.filter((item) => {
						return item !== data
					})
				} else {
					this.weekSelect.push(data)
				}
			},
		}
	}
</script>


<style lang="less" scoped>
	.week-list {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		grid-gap: 20rpx;
		position: relative;
	
		.week-item {
			padding: 15rpx 0;
			background-color: rgb(243, 243, 243);
			border-radius: 5rpx;
			text-align: center;
			color: rgb(51, 51, 51);
			font-size: 24rpx;
			font-weight: 500;
			border: solid 2rpx transparent;
			box-sizing: border-box;
		}
	
		.active {
			color: rgba(255, 98, 0, 1);
			background-color: rgba(255, 65, 5, 0.1);
			// border: solid 2rpx rgb(99, 93, 247);
			position: relative;
	
			// &:before {
			// 	display: block;
			// 	content: '';
			// 	position: absolute;
			// 	width: 27rpx;
			// 	height: 28rpx;
			// 	right: -2rpx;
			// 	bottom: -2rpx;
			// 	background-image: url("https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/46b1cc85fcb0fd76095daf823b7d2bb4a3235519.png");
			// 	background-repeat: no-repeat;
			// 	background-size: 100%;
			// }
		}
	
		.active1 {
			color: rgba(255, 98, 0, 1);
			background-color: rgba(255, 65, 5, 0.1);
			// border: solid 2rpx rgb(99, 93, 247);
			position: relative;
		}
	
		.active2 {
			color: rgba(255, 98, 0, 1);
			background-color: rgba(255, 65, 5, 0.1);
			// border: solid 2rpx rgb(99, 93, 247);
			position: relative;
		}
	
		.check {
			color: rgb(51, 51, 51);
			font-size: 24rpx;
			position: absolute;
			bottom: 10rpx;
			right: 0;
		}
	}
</style>